<script setup lang="ts">
import { setPayPasswordApi, updatePayPasswordFreeApi } from '@/services/wallet'
import { Toast } from '@/utils/tools'
import { ref } from 'vue'
const props = defineProps({
  isReset: {
    type: Boolean,
    default: false,
  },
  isSetting: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['finish', 'back'])

// 第一次输入密码
const isFirst = ref(true)
// 第一次输入密码列表
const firstPassword = ref<number[]>([])
// 第二次输入密码列表
const secondPassword = ref<number[]>([])
const inputList = ref<number[]>([])

async function setPayPassword() {
  const res = await setPayPasswordApi({
    firstPassword: firstPassword.value?.join(''),
    secondPassword: secondPassword.value?.join(''),
  })
  if (res.code === 200) {
    emit('finish', [], props.isSetting ? 'isSetting' : 'isReset')
  }
  clear()
}
async function handleInput(item: number) {
  if (item !== 11 && item !== 10 && inputList.value.length < 7) {
    inputList.value.push(item)
  } else if (item === 11 && inputList.value.length > 0) {
    inputList.value.pop()
  }
  if (inputList.value.length === 6) {
    if (props.isReset || props.isSetting) {
      //设置或者重置密码
      if (isFirst.value) {
        firstPassword.value = [...inputList.value]
        inputList.value = []
        isFirst.value = false
      } else {
        secondPassword.value = [...inputList.value]
        if (JSON.stringify(firstPassword.value) !== JSON.stringify(secondPassword.value)) {
          Toast('两次密码输入不一致，请重新设置')
          firstPassword.value = []
          secondPassword.value = []
          isFirst.value = true
          inputList.value = []
          return
        }
        setPayPassword()
      }
    } else {
      emit('finish', inputList.value)
      inputList.value = []
    }
  }
  console.log('inputList.value', inputList.value)
}

function clear() {
  inputList.value = []
  firstPassword.value = []
  secondPassword.value = []
  isFirst.value = true
}

function handleBack() {
  if (isFirst.value && props.isSetting) {
    // 第一次设置密码
    uni.navigateBack()
  } else if (!isFirst.value && props.isSetting) {
    //第二次设置密码
    clear()
  }

  // 支付密码页面进入重置密码
  if (isFirst.value && props.isReset) {
    // 第一次设置密码
    emit('back', 'code')
  } else if (!isFirst.value && props.isReset) {
    //第二次设置密码
    clear()
  }
}
defineExpose({
  clear,
  handleBack,
})
</script>
<template>
  <view>
    <view class="title" v-if="props.isReset" :style="'margin: 110rpx auto 100rpx;'">{{
      props.isReset && isFirst ? '请输入新支付密码' : '请再次输入支付密码'
    }}</view>
    <view class="title" v-if="!props.isReset && !props.isSetting">请输入支付密码</view>
    <view class="title" v-if="props.isSetting" :style="'margin: 110rpx auto 100rpx;'">{{
      props.isSetting && isFirst ? '请设置支付密码' : '请再次输入支付密码'
    }}</view>
    <view class="inputList">
      <view class="inputItem" v-for="item in 6" :key="item">
        <view
          v-if="inputList.length >= item && inputList[item - 1] !== undefined"
          class="password"
        ></view>
      </view>
    </view>
    <view class="keyboard">
      <view
        class="keyItem"
        v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 0, 11]"
        :key="index"
        :class="item === 11 ? 'delete' : ''"
        @click="handleInput(item)"
      >
        <view v-if="item !== 10 && item !== 11">{{ item }}</view>
        <view v-if="item === 10"></view>
        <image v-if="item === 11" src="/static/images/delete.png" />
      </view>
      <view class="bottom"></view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.title {
  text-align: center;
  color: #373737;
  font-family: 'PingFang SC';
  font-size: 36rpx;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 60rpx;
  margin-top: 28rpx;
}
.inputList {
  display: flex;
  align-items: center;
  justify-content: center;
  .inputItem {
    width: 80rpx;
    height: 80rpx;
    border-radius: 12rpx;
    background: #f2f2f2;
    margin-right: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .password {
      width: 24rpx;
      height: 24rpx;
      border-radius: 100%;
      background: #333;
    }
    &:last-of-type {
      margin-right: 0;
    }
  }
}
.keyboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  .keyItem {
    width: 250rpx;
    height: 128rpx;
    text-align: center;
    color: #000;
    text-align: center;
    font-family: 'PingFang SC';
    font-size: 40rpx;
    font-style: normal;
    font-weight: 400;
    border: 0.3px solid rgba(0, 0, 0, 0.06);
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    &:nth-of-type(1),
    &:nth-of-type(4),
    &:nth-of-type(7) {
      border-left: none;
    }
    &:not(:nth-of-type(8)) {
      border-bottom: none;
    }
    &:nth-of-type(10),
    &:nth-of-type(11) {
      border: none;
    }
    &:nth-of-type(10) {
      background: #ededed;
    }
  }
  .delete {
    background: #ededed;
    image {
      width: 48rpx;
      height: 36rpx;
    }
  }
  .null {
    background: #ededed;
  }
}
.bottom {
  background: #ededed;
  height: 68rpx;
  width: 100%;
}
</style>
